<template>
  <div>
    <!-- 级联选择器 -->
    <el-row class="block">
      <el-col :span="4">
        <el-cascader v-model="value" :options="options" clearable filterable :getCheckedNodes="true" @change="handleChange"> </el-cascader>
      </el-col>
    </el-row>
    <div>
      <el-card class="box-card">

        <!-- 新闻表格区域 -->
        <el-table
          :data="tableData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
          border
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scope">
              <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="releaseTime" label="日期" width=""> </el-table-column>
          <el-table-column prop="title" label="新闻标题" width=""> </el-table-column>
          <el-table-column prop="id" label="id" width=""> </el-table-column>
          <el-table-column label="操作" width="">
            <template slot-scope="scope">
              <!-- {{ scope.row.id }} -->
              <div>
                <el-button type="success" @click="look(scope.row.id)">查看</el-button>
                <el-button type="warning" @click="showEditDialog(scope.row.id)">修改</el-button>
                <el-button type="info" @click="deleteNews(scope.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div>
          <!-- 获取新闻列表分页 -->
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[6, 12, 18]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
      <!-- 修改新闻的对话框 -->
      <el-dialog title="修改新闻" :visible.sync="editDialogVisible" width="50%" :before-close="handleClose">
        <!-- rules表单验证规则，ref当前表单的验证对象 -->
        <el-form ref="editFormRef" :model="editForm" label-width="80px" status-icon>
          <el-form-item label="id:">
            <el-input v-model="editForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="新闻标题:">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="发布日期:">
            <el-date-picker v-model="editForm.releaseTime" type="date" placeholder="请选择发布日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editNew()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  name:'reviewPage',
  data() {
    return {
      search: '',
      getShow: true, //获取分页的显示(布尔值)
      gettable: true, //获取表格的显示
      visible: false,
      editDialogVisible: false, //控制修改对话框的布尔值
      AdDialogVisible: false, //超管登录对话框
      Ad: { username: '', password: '' }, //超管对象
      editForm: {}, //查询到的新闻对象，目前仅供修改使用
      newsCategoryId: 1, //先存一个小标题id
      tableData: [], //新闻列表对象
      fuzzytableData: [], //模糊查询列表对象
      pageSize: 6, //每页条数
      currentPage: 1, //当前页
      total: 0, //新闻总条数
      fuzzyShow: false, //模糊查询分页的显示(布尔值)
      fuzzytable: false, //模糊查询表格的显示
      fuzzyForm: { fuzzytitle: '', fuzzytotal: 0, fuzzycurrent: 1, fuzzysize: 6 }, //模糊查询列表对象
      value: [],
      options: [
        {
          value: 1,
          label: '首页',
          children: [
            {
              value: 42,
              label: '消防要闻'
            },
            {
              value: 43,
              label: '机关文件'
            },
            {
              value: 44,
              label: '机关动态'
            },
            {
              value: 45,
              label: '轮播图'
            }
          ]
        },
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    //修改对话框关闭的方法
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then( () => {
          done()
        })
        .catch(() => {})
    },
    //级联选择器的方法
    handleChange(value) {
      // console.log(value);
      // console.log(value[1]);
      this.currentPage = 1
      this.newsCategoryId = value[1] //将得到的小标题id存放起来
      this.query(this.newsCategoryId)
    },
    query(newsCategoryId) {
      console.log(newsCategoryId)

    },
    //展示修改对话框
    showEditDialog(id) {
      console.log(id)

    },
    //确定修改表单提交，验证发起请求
    editNew() {

    },
    //模糊查询
    fuzzyList(title) {
      console.log(title);

    },
    //清空查询列表内容
    clear() {
      this.tableData = []
      this.fuzzytableData = []
      this.fuzzyForm.fuzzytotal = 0
      this.fuzzyShow = false
      this.getShow = true
      this.fuzzytable = false
      this.gettable = true
    },
    //根据id删除新闻
    async deleteNews(id) {
      console.log(id);

    },
    //查看
    look(id) {
      this.$router.push({ path: 'news', query: { id: id } })
    },
    //超管登录对话框
    showAdDialog() {
      this.AdDialogVisible = true
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.query(this.newsCategoryId)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.query(this.newsCategoryId)
    },
    handleCurrentChangefuzzy(val) {
      this.fuzzyForm.fuzzycurrent = val
      this.fuzzyList(this.fuzzyForm.fuzzytitle) //模糊查询
    },
    handleSizeChangefuzzy(val) {
      this.fuzzyForm.fuzzysize = val
      this.fuzzyList(this.fuzzyForm.fuzzytitle) //模糊查询
    },

  }
}
</script>

<style lang="less" scoped>
.add {
  margin-bottom: 10px !important;
}
.block {
  margin-bottom: 10px;
}
.el-pagination {
  margin-top: 10px;
}
</style>
